
  <div style="text-align:center">
	<span style="display: inline-block; width:100%; max-width:1040px">
		<div id="myCarousel" class="carousel slide" style="text-align:left">
			<ol class="carousel-indicators">
				<% @multimedia.each_with_index do |item_image, index| %>
					<li data-target="#myCarousel" data-slide-to="<%= index %>"<% if index == 0%> class="active"<% end %>></li>
				<% end %>
			</ol>
			<!-- Carousel items -->
			<div class="carousel-inner">
				<% @multimedia.each_with_index do |item_image, index| %>
					<div class="<% if index == 0 %>item active<% else %>item<% end %>">
						<%= image_tag(item_image.image_url(:carousel), :class=>"profile") %>
						<div class="carousel-caption">
						  <h4><% if item_image.submission.bird.id == 31 %>
									 <%= item_image.submission.common_name.split(' ').map(&:capitalize).join(' ') %>
							  <% else %>
						             <%= item_image.submission.bird.common_name.split(' ').map(&:capitalize).join(' ') unless item_image.submission.bird.nil? %>
						      <% end %>
						  </h4>
						  <p style="text-indent: 0em;">Spotted on <%= item_image.submission.sight_date_time.strftime("%B %e, %Y") %>
						  <% unless item_image.submission.location.blank? %>
						  at <%= item_image.submission.location %>
						  <% end %>
						  </p>
						</div>
					</div>
				<% end %>
			</div>

			<!-- Carousel nav -->
				<a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a>
				<a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>
		</div>
	</span>
  </div>
		<p>If you saw a bird, please let us know.</p>

		<%= render :partial=>'posts/singlepost' %>
		<br/>
		<%= button_to "More news posts...", list_posts_path, :class => 'btn-custom' %>

		
    <script type="text/javascript">

    $('.carousel').carousel({

      interval: 5000

    })

    </script>